<template>
	<view id="feature-content">
		<view class="status-bar-fixed" style="height: var(--status-bar-height);">
			<!-- 所有自定义导航都要加这个，用来处理小程序显示时的手机信号那一栏的高度 -->
		</view>
		<view class="title-area">
			内容精选
		</view>
		<view v-for="(v, k) in row1" :key="k" @click="redirectTo(v)" class="item">
			<image :src="`https://www.lin-home.com/static/DigitalPlatform/v1/${v.title}.jpg`" alt="v.title"></image>
		</view>
	</view>
</template>

<script setup>
	// 黄玺 @ 2023-4-19
	import {
		domain
	} from '../../stores/useApp.js'
	import {
		ref
	} from 'vue';
	let row1 = [{
			title: "迁台渊源",
			url: "relocation"
		},
		{
			title: "发展历程",
			url: "History"
		},
		{
			title: "林氏家系",
			url: "LinFamilyLineage"
		},
		{
			title: "家国情怀",
			url: "HomeAndCountryFeelings"
		},
		{
			title: "宗祠家庙",
			url: "AncestralTemple"
		},
		{
			title: "文书档案",
			url: "Paperwork"
		},
		{
			title: "两岸交流",
			url: "exchange"
		},
		// {
		// img: "../../static/DigitalPlatform/林氏足迹.png",
		// 	title: "林氏足迹",
		// 	url: "LinFamilyLineage"
		// },
	]

	function redirectTo(item) {
		let url = `/pages/DigitalPlatform/${item.url}?title=${item.title}`;
		uni.redirectTo({
			url
		})
	}
</script>

<style lang="less">
	@import url(shared.less);
	@title-size: 35upx;
	#feature-content {
		.title-area {
			font-size: @title-size;
			line-height: @title-size*3;
			text-align: center;
			color: #fff;
		}
		
		background: #a0adbf;
		box-sizing: border-box;
		padding-bottom: 50upx;
		
		.item {
			display: block;
			position: relative;
			image {
				width: 720upx;
				height: 360upx;
				margin: 0 auto;
				display: block;
				border-radius: 5px;
				box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.58);
			}
			margin-top: 30upx;
		}
	}
</style>